<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="../swiper-master/swiper-bundle.min.css">
    <script src="../swiper-master/swiper-bundle.min.js"></script>
    <!-- <script src="../login/jquery/jquery.min.js"></script> -->


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        .login {
            width: 686px;
            height: 310px;
            padding: 20px;
            margin: 0 auto;
        }

        .login .swiper {
            width: 360px;
            height: 310px;
            overflow: hidden;
            float: left;
        }

        .login .loginCon {
            text-align: center;
            position: relative;
        }

        .login .loginCon .title {
            color: rgb(138, 133, 133);
            font-size: 15px;
        }

        .oauth-buttons {
            margin-top: 10px;
        }

        .login .oauth-buttons.small a {
            width: 48px;
            height: 48px;
        }

        .login .oauth-buttons a {
            display: inline-block;
            width: 64px;
            height: 64px;
            margin-right: 5px;
        }

        .login .loginCon .oauth-buttons a:nth-of-type(1) {
            background: url(https://huaban.com/img/login_icons_tiny.svg);
        }

        .login .loginCon .oauth-buttons a:nth-of-type(2) {
            background: url(https://huaban.com/img/login_icons_tiny.svg) -80px 0;
        }

        .login .loginCon .oauth-buttons a:nth-of-type(3) {
            background: url(https://huaban.com/img/login_icons_tiny.svg) -160px 0;
        }

        .login .loginCon .oauth-buttons a:nth-of-type(4) {
            background: url(https://huaban.com/img/login_icons_tiny.svg) -240px 0;
        }

        .login .loginCon .oauth-buttons a:nth-of-type(5) {
            background: url(https://huaban.com/img/login_icons_tiny.svg) -320px 0;
        }

        .logo img {
            height: 40px;
            margin-bottom: 20px;
        }

        .mail-login .with-line {
            margin: 5px 0 10px 0;
            color: rgb(131, 131, 131);
        }

        input {
            width: 264px;
            height: 36px;
            padding: 0 10px;
            outline: 0;
            border: none;
            border: 1px solid #ddd;
            margin-bottom: 10px;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        .btn .text {
            display: block;
            width: 284px;
            height: 36px;
            line-height: 36px;
            border: 1px solid rgb(238, 73, 73);
            background-color: rgb(238, 73, 73);
            margin-left: 380px;
        }

        .mail-login {
            position: relative;
        }


        .btn .text {
            display: block;
            width: 284px;
            height: 36px;
            line-height: 36px;
            border: 1px solid rgb(238, 73, 73);
            background-color: rgb(238, 73, 73);
            margin-left: 380px;
        }

        .title {
            margin-bottom: 20px;
        }

        .mobile {
            color: rgb(202, 173, 145);
            font-size: 14px;
            margin-top: 20px;
            cursor: pointer;
        }

        .mobile:hover {
            color: rgb(211, 53, 53);
            text-decoration: underline;
        }



        .goto-sign-up {
            position: absolute;
            top: 290px;
            left: 490px;
            font-size: 14px;
            color: rgb(87, 87, 87);
        }

        .ret {
            color: rgb(192, 164, 141);
            font-size: 13px;
            margin-top: 10px;
            cursor: pointer;
        }

        .ret:hover {
            text-decoration: underline;
        }

        .red-link {
            color: rgb(219, 92, 92);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="login">
        <div class="swiper">
            <div class="swiper-wrapper">
                <!-- <div class="swiper-slide">
                    <img src="https://huaban.com/img/login/slide_img_01.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://huaban.com/img/login/slide_img_02.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://huaban.com/img/login/slide_img_03.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://huaban.com/img/login/slide_img_04.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://huaban.com/img/login/slide_img_05.jpg" alt="">
                </div> -->
            </div>
        </div>
        <div class="loginCon">
            <div class="logo">
                <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2…sec=1644674581&t=6ba0946ec0a2d1cfee4551c99257be01.png" alt=""> -->
            </div>
            <div class="phone">
                <!-- 
                <div class="title">用第三方帐号登录</div>
                <div class="oauth-buttons small">
                    <a class="weibo" href="#" title="微博帐号登录" rel="nofollow"></a>

                    <a class="qzone" href="#" title="QQ帐号登录" rel="nofollow"></a>

                    <a class="wechat" href="#" title="微信帐号登录" rel="nofollow"></a>

                    <a class="douban" href="#" title="豆瓣帐号登录" rel="nofollow"></a>
                </div>
                <p class="mobile">使用手机号注册</p> -->


                <div class="title">使用手机号注册</div>
                <div class="mail-login">

                    <form class="mail-login">

                        <p class="p1" style="width: 788px;">
                            <input class="clear-input tel" type="text" name="email" placeholder="输入手机号">
                            <span class="tell"></span>
                        </p>

                        <p class="p1" style="width: 788px;">
                            <input class="clear-input pass" name="password" type="password" placeholder="密码">
                            <span class="passs"></span>
                        </p>

                        <a class="go btn btn18 rbtn" href="#">
                            <button class="text" disabled >注册</button>
                            <!--  -->
                            <!-- <span class="text" disabled>注册</span> -->
                        </a>
                        <p class="ret">返回第三方注册</p>
                    </form>
                </div>

            </div>

            <div class="goto-sign-up">已有帐号？<a class="red-link" href="zlogin.html">登录></a></div>
        </div>
    </div>

    <script>
        //
        let phone = document.querySelector('.phone');
        // console.log(phone);
        phone.onclick = function (e) {
            // console.log(e.target.className);
            if (e.target.className == 'mobile') {
                let str = `
                <div class="title">使用手机号注册</div>
                <div class="mail-login">

                    <form class="mail-login">

                        <input class="clear-input tel" type="text" name="tel" placeholder="输入手机号">

                        <input class="clear-input pass" name="password" type="password" placeholder="密码">

                        <a class="go btn btn18 rbtn" href="#">
                            <span class="text">注册</span>
                        </a>
                        <p class="ret">返回第三方注册</p>
                    </form>
                </div>`;
                phone.innerHTML = str;
            }


            if (e.target.className == 'ret') {
                let str = `
                <div class="title">用第三方帐号登录</div>
                <div class="oauth-buttons small">
                    <a class="weibo" href="#" title="微博帐号登录" rel="nofollow"></a>

                    <a class="qzone" href="#" title="QQ帐号登录" rel="nofollow"></a>

                    <a class="wechat" href="#" title="微信帐号登录" rel="nofollow"></a>

                    <a class="douban" href="#" title="豆瓣帐号登录" rel="nofollow"></a>
                </div>
                <p class="mobile">使用手机号注册</p> `;
                phone.innerHTML = str;
            }
        }

        let tel = document.querySelector('.tel');
        let password = document.querySelector('.pass');
        let btn = document.querySelector('.btn');
        let tell = document.querySelector('.tell');
        let passs = document.querySelector('.passs');
        let text =document.querySelector('.text');
        const fun ={
            tel:false,
            password:false,
        }

        tel.oninput = function () {
            // 开头必须1 第二位数[3-9] 后面9位数字
            let reg1 = /^1[3-9]\d{9}$/;
            let res = reg1.test(tel.value);
            if (!res) {
                tell.innerHTML = `手机格式错误`
                fun.tel=false
                inpy()
                return

            }

            tell.innerHTML = `手机格式正确`
            fun.tel=true;
            inpy()

        }
        password.oninput = function () {
            //  至少8个字符，至少1个大写字母，1个小写字母和1个数字：
            let reg2 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/i;
            let res = reg2.test(password.value);
            console.log(res);
            if (!res) {
                passs.innerHTML = `密码格式错误`
                fun.password=false;
                inpy()
                return

            }
            passs.innerHTML = `密码正确`
            fun.password=true;
            inpy();

        }
        function inpy(){
            if ( fun.password&& fun.tel){
                text.removeAttribute("disabled");//解除禁用
                console.log("对");
            }else{
                text.setAttribute("disabled","disabled");//继续禁用
                console.log("错");
            }
        }


        //绑定表单提交事件
        btn.onclick = function (e) {
            e.preventDefault();

            let num = tel.value;
            let pass = password.value;

            //设置请求
            let xhr = new XMLHttpRequest();
            xhr.open('get', `http://localhost:9090/zhuce?userphone=${num}&password=${pass}`);
            xhr.send();
            xhr.onload = function () {
                let res = JSON.parse(xhr.responseText);
                if (res.code) {

                    location.href = "http://127.0.0.1:5500/hqx/index.html"

                } else {
                    alert(res.msg)
                }
            }
        }

        var mySwiper = new Swiper('.swiper', {
            effect: 'fade',
            autoplay: {
                delay: 20,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
        });
    </script>
</body>

</html>